<?php
$p = Yii::$app->controller->module->templateAsset."/guoqingzhufu/";
?>

     <!--模板动画-->
<style type="text/css">
    *{
        padding:0px;margin:0px;-webkit-box-sizing:border-box;}
    body,html,.main-body{
        background-color:black;
        height:100%
    }
    #container{width:500px;height:100%;position:absolute;overflow:hidden;}
    #container>img{position:absolute;}
    #img1h,#img1v,#img2h,#img2v,#div1,#div2{position:absolute;}
    .kuangh{width:475px;height:323px;left:12px;top:206px;position:absolute;}
    .divh{position:absolute;width:445px;height:305px;overflow:hidden;left:27px;top:215px;background:no-repeat;background-size:cover;}.kuangv{width:400px;height:564px;left:50px;top:108px;position:absolute;}
    .divv{width:370px;height:526px;position:absolute;left:65px;top:127px;overflow:hidden;background:no-repeat;background-size:cover;}#page1,#page2{opacity:0;}.box1{position:relative;}.box1 img{position:absolute;}.img1{left:397px;top:-255px;}
    .box1_2{width:233px;height:239px;position:absolute;left:397px;top:-255px;}
    .headboximg1{-webkit-animation:imgani 2s forwards linear;}
    .headbox1{-webkit-animation:imgani2 .6s forwards 2s linear;}
    .headbox1_img{-webkit-animation:scaleimg 3s linear;}
    .lantern_1{left:26px;top:0;-webkit-transform-origin:50% 0;-webkit-animation:flag_top_move 1.8s ease-in-out infinite alternate;}
    .long{left:107px;top:10px;}
    .lantern_2{left:252px;top:0;-webkit-transform-origin:50% 0;-webkit-animation:flag2_top_move 1.5s ease-in-out infinite alternate;}.lantern_3{left:302px;top:0;-webkit-transform-origin:50% 0;-webkit-animation:flag_top_move 2s ease-in-out infinite alternate;}.bottom_img{left:0px;bottom:0px;-webkit-animation:bottom_img_do 3s linear infinite;}
    .flag_all_1{position:absolute;width:146px;height:112px;left:93px;top:617px;-webkit-animation:bottom_img_do 3s linear infinite;}.flag_all_2{position:absolute;width:106px;height:75px;left:54px;top:600px;-webkit-animation:bottom_img_do 3s linear infinite;}.flag_all_3{position:absolute;width:120px;height:85px;left:-1px;top:644px;-webkit-animation:bottom_img_do 3s linear infinite;}
    .flag_all_1 img{width:100%;position:absolute;left:0;top:0px;display:none;-webkit-transform:rotate(20deg);}.flag_all_2 img{width:100%;position:absolute;left:0;top:0px;display:none;}.flag_all_3 img{width:100%;position:absolute;left:0;top:0px;display:none;-webkit-transform:rotate(15deg);}.jinxing{top:0px;right:-1px;-webkit-transform-origin:100% 0%;-webkit-animation:jinxing_do 6s linear infinite;}
    #modian1{position:absolute;opacity:0;top:-40px;width:400px;left:50px;}
    #modian2{position:absolute;opacity:0;width:350px;top:11px;left:254px;}
    #modian3{position:absolute;opacity:0;width:350px;top:-95px;left:65px;}
    #modian4{position:absolute;opacity:0;width:300px;top:105px;left:-17px;}
    @-webkit-keyframes title_in{
        0%{-webkit-transform:translateY(0);opacity:0;}
        100%{-webkit-transform:translateY(-120px);opacity:1;}
    }
    @-webkit-keyframes title_out{
        0%{-webkit-transform:translateY(-120px);opacity:1;}
        100%{-webkit-transform:translateY(-250px);opacity:0;}
    }
    @-webkit-keyframes in_up{
        from{-webkit-transform:translate(0px,20px);opacity:0}
        to{-webkit-transform:translate(0px,0px);opacity:1}
    }
    @-webkit-keyframes out_up{
        from{-webkit-transform:translate(0px,0px);opacity:1}
        to{-webkit-transform:translate(0px,-20px);opacity:0}
    }
    @-webkit-keyframes in_down{
        from{-webkit-transform:translate(0px,-20px);opacity:0}
        to{-webkit-transform:translate(0px,0px);opacity:1}
    }
    @-webkit-keyframes out_down{
        from{-webkit-transform:translate(0px,0px);opacity:1}
        to{-webkit-transform:translate(0px,20px);opacity:0}
    }
    @-webkit-keyframes in_left{
        from{-webkit-transform:translate(20px,0px);opacity:0}
        to{-webkit-transform:translate(0px,0px);opacity:1}
    }
    @-webkit-keyframes out_left{from{-webkit-transform:translate(0px,0px);opacity:1}to{-webkit-transform:translate(-20px,0px);opacity:0}}@-webkit-keyframes in_right{from{-webkit-transform:translate(-20px,0px);opacity:0}to{-webkit-transform:translate(0px,0px);opacity:1}}@-webkit-keyframes out_right{from{-webkit-transform:translate(0px,0px);opacity:1}to{-webkit-transform:translate(20px,0px);opacity:0}}
    @-webkit-keyframes movingup{from{-webkit-transform:translate(0px,20px);}to{-webkit-transform:translate(0px,-0px);}}@-webkit-keyframes movingdown{from{-webkit-transform:translate(0px,-20px);}to{-webkit-transform:translate(0px,0px);}}@-webkit-keyframes movingleft{from{-webkit-transform:translate(20px,0px);}to{-webkit-transform:translate(-0px,0px);}}@-webkit-keyframes movingright{from{-webkit-transform:translate(-20px,0px);}to{-webkit-transform:translate(0px,0px);}}@-webkit-keyframes main_title_do{0%{-webkit-transform:scale(1,1);}50%{-webkit-transform:scale(0.9,0.9);}100%{-webkit-transform:scale(1,1);}}
    @-webkit-keyframes jinxing_do{0%{-webkit-transform:scale(1,1);}50%{-webkit-transform:scale(0.85,0.85);}100%{-webkit-transform:scale(1,1);}}
    @-webkit-keyframes bottom_img_do{0%{-webkit-transform:translateY(0);}50%{-webkit-transform:translateY(10px);}100%{-webkit-transform:translateY(0);}}
    @-webkit-keyframes flag_top_move{0%{-webkit-transform:rotate(4deg);}100%{-webkit-transform:rotate(-4deg);}}@-webkit-keyframes flag2_top_move{0%{-webkit-transform:rotate(-4deg);}100%{-webkit-transform:rotate(4deg);}}@-webkit-keyframes modian1{from{-webkit-transform:scale(0,0);opacity:0.9;}to{-webkit-transform:scale(0.9,0.9);opacity:0;}}
    @-webkit-keyframes modian2{from{-webkit-transform:scale(0,0);opacity:0.9}to{-webkit-transform:scale(1,1);opacity:0}}@-webkit-keyframes imgani{from{left:397px;top:-255px;}to{left:5px;top:0;}}@-webkit-keyframes imgani2{0%{left:397px;top:-255px;}80%{left:-21px;top:64px;}100%{left:30px;top:20px;}}
    @-webkit-keyframes scaleimg{
        0%{-webkit-transform:scale(1,1);}
        50%{-webkit-transform:scale(1.1,1.1);}100%{-webkit-transform:scale(1,1);}
    }
</style>
<div id='container'>
  <img src='<?=$p?>images/TB2C5mcXcsX61Bjy1XdXXa0aFXa_!!1016194477.jpg'>
  <div class='box1' id='box1'>
    <img src='<?=$p?>images/TB2JtyhXmEb61BjSZFsXXbNMpXa_!!1016194477.png' class='img1' id='img1' />
    <div class='box1_2' id='box1_2'>
      <img src='<?=$p?>images/TB2skucXnka61BjSszfXXXN8pXa_!!1016194477.png' id='box1_2img' /></div>
  </div>
  <img class='lantern_1' src='<?=$p?>images/TB2ayKcXhIa61BjSsziXXak4FXa_!!1016194477.png' />
  <img class='long' src='<?=$p?>images/TB2OtGcXcwb61BjSszgXXbfDVXa_!!1016194477.png' />
  <img class='lantern_2' src='<?=$p?>images/TB2G21cXcsb61BjSszbXXcvMpXa_!!1016194477.png' />
  <img class='lantern_3' src='<?=$p?>images/TB2N.agXmkc61BjSZFCXXc_7VXa_!!1016194477.png' />
  <div id='div1'>
    <div id='page1'>
      <img id='kuang1h' class='kuangh' src='<?=$p?>images/TB21HShXhwb61BjSZFwXXXs3pXa_!!1016194477.png'>
      <div id='div1h' class='divh'>
        <img id='img1h'></div>
      <img id='kuang1v' class='kuangv' src='<?=$p?>images/TB2pEicXnwX61Bjy1zcXXX9RXXa_!!1016194477.png'>
      <div id='div1v' class='divv'>
        <img id='img1v'></div>
      <img id='modian1' src='<?=$p?>images/TB2NamcXccb61BjSsphXXczyFXa_!!1016194477.png'>
      <img id='modian2' src='<?=$p?>images/TB2NamcXccb61BjSsphXXczyFXa_!!1016194477.png'></div>
  </div>
  <div id='div2'>
    <div id='page2'>
      <img id='kuang2h' class='kuangh' src='<?=$p?>images/TB21HShXhwb61BjSZFwXXXs3pXa_!!1016194477.png'>
      <div id='div2h' class='divh'>
        <img id='img2h'></div>
      <img id='kuang2v' class='kuangv' src='<?=$p?>images/TB2pEicXnwX61Bjy1zcXXX9RXXa_!!1016194477.png'>
      <div id='div2v' class='divv'>
        <img id='img2v'></div>
      <img id='modian3' src='<?=$p?>images/TB2NamcXccb61BjSsphXXczyFXa_!!1016194477.png'>
      <img id='modian4' src='<?=$p?>images/TB2NamcXccb61BjSsphXXczyFXa_!!1016194477.png'></div>
  </div>
  <div id='pagetitle' style='position:absolute;width:426px;height:377px;bottom: 100px;left:37px;opacity: 0;'>
    <img src='<?=$p?>images/TB2xlCcXnka61Bjy1zbXXcizVXa_!!1016194477.png'>
    <div style='position:absolute;width:305px;height:217px;top:80px;left:60px;overflow:hidden;display:table'>
      <div id='titlecontent' style='width:305px;height:217px;vertical-align:middle;display:table-cell;text-align:center;font-size:28px;line-height:40px;font-weight: bold; color:#e20000;'></div>
    </div>
    <div id='wenzi'></div>
  </div>
  <div class='flag_all_2'>
    <img class='flag_1' src='<?=$p?>images/TB22GGhXngc61BjSZFkXXcTkFXa_!!1016194477.png' />
    <img class='flag_2' src='<?=$p?>images/TB21uehXisd61BjSZFxXXcdPpXa_!!1016194477.png' />
    <img class='flag_3' src='<?=$p?>images/TB2U61gXiwd61BjSZFtXXai7XXa_!!1016194477.png' />
    <img class='flag_4' src='<?=$p?>images/TB2XkugXiwd61BjSZFtXXai7XXa_!!1016194477.png' />
    <img class='flag_5' src='<?=$p?>images/TB26MWdXcwX61BjSspaXXXLrpXa_!!1016194477.png' />
    <img class='flag_6' src='<?=$p?>images/TB28lahXmMb61BjSZFyXXcaUFXa_!!1016194477.png' />
    <img class='flag_7' src='<?=$p?>images/TB2FFShXbMc61BjSZFFXXaDLFXa_!!1016194477.png' />
    <img class='flag_8' src='<?=$p?>images/TB235yhXmZb61BjSZFqXXcWVVXa_!!1016194477.png' /></div>
  <div class='flag_all_3'>
    <img class='flag_1' src='<?=$p?>images/TB22GGhXngc61BjSZFkXXcTkFXa_!!1016194477.png' />
    <img class='flag_2' src='<?=$p?>images/TB21uehXisd61BjSZFxXXcdPpXa_!!1016194477.png' />
    <img class='flag_3' src='<?=$p?>images/TB2U61gXiwd61BjSZFtXXai7XXa_!!1016194477.png' />
    <img class='flag_4' src='<?=$p?>images/TB2XkugXiwd61BjSZFtXXai7XXa_!!1016194477.png' />
    <img class='flag_5' src='<?=$p?>images/TB26MWdXcwX61BjSspaXXXLrpXa_!!1016194477.png' />
    <img class='flag_6' src='<?=$p?>images/TB28lahXmMb61BjSZFyXXcaUFXa_!!1016194477.png' />
    <img class='flag_7' src='<?=$p?>images/TB2FFShXbMc61BjSZFFXXaDLFXa_!!1016194477.png' />
    <img class='flag_8' src='<?=$p?>images/TB235yhXmZb61BjSZFqXXcWVVXa_!!1016194477.png' /></div>
  <div class='flag_all_1'>
    <img class='flag_1' src='<?=$p?>images/TB22GGhXngc61BjSZFkXXcTkFXa_!!1016194477.png' />
    <img class='flag_2' src='<?=$p?>images/TB21uehXisd61BjSZFxXXcdPpXa_!!1016194477.png' />
    <img class='flag_3' src='<?=$p?>images/TB2U61gXiwd61BjSZFtXXai7XXa_!!1016194477.png' />
    <img class='flag_4' src='<?=$p?>images/TB2XkugXiwd61BjSZFtXXai7XXa_!!1016194477.png' />
    <img class='flag_5' src='<?=$p?>images/TB26MWdXcwX61BjSspaXXXLrpXa_!!1016194477.png' />
    <img class='flag_6' src='<?=$p?>images/TB28lahXmMb61BjSZFyXXcaUFXa_!!1016194477.png' />
    <img class='flag_7' src='<?=$p?>images/TB2FFShXbMc61BjSZFFXXaDLFXa_!!1016194477.png' />
    <img class='flag_8' src='<?=$p?>images/TB235yhXmZb61BjSZFqXXcWVVXa_!!1016194477.png' /></div>
  <img class='bottom_img' src='<?=$p?>images/TB2un9hXngc61BjSZFzXXXH2FXa_!!1016194477.png' />
  <img class='jinxing' src='<?=$p?>images/TB2iwGhXmIb61BjSZFDXXa0yVXa_!!1016194477.png' /></div>

<script>
 function id(name) {
	return document.getElementById(name)
}
var image_size_width = [];
var image_size_height = [];
var image_url_index = 0;
var have_num = 0;
var error_num = 0;
var canshow = true;
var reshow = false;
var timeout0;
var timeout1;
var timeout2;
var timeout3;
var timeout4;
var timeout5;
var timeout6;
var delaytime = 4000;

function load_images() {
	reshow = false;
	image_size_width = [];
	image_size_height = [];
	Onload_imgs_url = [];
	image_url_index = 0;
	have_num = 0;
	error_num = 0;
	begin_titletime = new Date();
	begin_titletime = begin_titletime.getTime();
	showtitle();
	canshow = true;
	bl_keepload = 'first';
	step_load()
}
var bl_keepload = 'first';
var step_loadnum = 5;

function step_load() {
	var load_num = 0;
	if (image_url_index == 0 && bl_keepload == 'first') {
		if (slider_images_url.length > step_loadnum) {
			load_num = step_loadnum;
			bl_keepload = 'next'
		} else {
			load_num = slider_images_url.length;
			bl_keepload = 'end'
		}
		for (var i = 0; i < load_num; i++) {
			var img = new Image();
			img.index = i;
			img.src = slider_images_url[i];
			img.onload = image_onload;
			img.onerror = image_onerror;
			Onload_imgs_url[i] = 'loading'
		}
	} else if (bl_keepload == 'end') {
		return
	} else {
		if (slider_images_url.length - image_url_index > step_loadnum * 2) {
			load_num = step_loadnum
		} else {
			load_num = slider_images_url.length - image_url_index - step_loadnum;
			bl_keepload = 'end'
		}
		for (var i = image_url_index + step_loadnum; i < image_url_index + step_loadnum + load_num; i++) {
			var img = new Image();
			img.index = i;
			img.src = slider_images_url[i];
			img.onload = image_onload;
			img.onerror = image_onerror;
			Onload_imgs_url[i] = 'loading'
		}
	}
}
function image_onerror(event) {
	var img = event.target;
	var index = img.index;
	if (index < step_loadnum) error_num++;
	Onload_imgs_url[index] = 'not find';
	if ((have_num + error_num >= step_loadnum || slider_images_url.length == (have_num + error_num)) && canshow == true) {
		reshow = false;
		canshow = false;
		if (have_num == 0) return;
		var end_titletime = new Date();
		end_titletime = end_titletime.getTime();
		var dis_titletime = Math.abs(end_titletime - begin_titletime);
		if (dis_titletime > delaytime) {
			distitle()
		} else {
			dis_titletime = delaytime - dis_titletime;
			timeout0 = setTimeout(function() {
				distitle()
			}, dis_titletime)
		}
	}
}
function image_onload(event) {
	if (reshow == true) return;
	var img = event.target;
	var index = img.index;
	if (index < step_loadnum) {
		have_num++
	}
	Onload_imgs_url[index] = img.src;
	image_size_height[index] = img.height;
	image_size_width[index] = img.width;
	if ((have_num + error_num >= step_loadnum || slider_images_url.length == (have_num + error_num)) && canshow == true) {
		reshow = false;
		canshow = false;
		if (have_num == 0) return;
		var end_titletime = new Date();
		end_titletime = end_titletime.getTime();
		var dis_titletime = Math.abs(end_titletime - begin_titletime);
		if (dis_titletime > delaytime) {
			distitle()
		} else {
			dis_titletime = delaytime - dis_titletime;
			timeout0 = setTimeout(function() {
				distitle()
			}, dis_titletime)
		}
	}
}
function showtitle() {
	id('pagetitle').style.webkitAnimation = 'title_in 2.5s ease-out both';
	id('titlecontent').innerHTML = desc
}
function distitle() {
	nowReShow1()
}
function beijingMove(i) {
	var div1, div2, stime, maxSu;
	maxSu = 8;
	stime = 100;
	if (i == "" || isNaN(i) || i > maxSu) i = 1;
	i1 = i;
	i2 = i - 1;
	if (i2 == 0) i2 = maxSu;
	i = i + 1;
//	$(".flag_" + i1).css("display", "block");
//	$(".flag_" + i2).css("display", "none");
//        id(".flag_" + i1).style.display= "block";
//        id(".flag_" + i2).style.display= "none";
	setTimeout("beijingMove(" + i + ")", stime)
}
beijingMove(1);

function showmoshui() {
	id('modian1').style.webkitAnimation = 'modian1 2s linear forwards';
	id('modian2').style.webkitAnimation = 'modian2 2.5s 0.6s linear forwards';
	id('modian3').style.webkitAnimation = 'modian1 2s  linear forwards';
	id('modian4').style.webkitAnimation = 'modian2 2s 0.8s linear forwards'
}
function cleanmoshui() {
	id('modian1').style.webkitAnimation = '';
	id('modian2').style.webkitAnimation = '';
	id('modian3').style.webkitAnimation = '';
	id('modian4').style.webkitAnimation = ''
}
function show1() {
	setImage('1');
	id('page1').style.webkitAnimation = 'in_up 2s linear both';
	id('div1').style.webkitAnimation = 'movingup 5s linear both';
	cleanmoshui();
	setTimeout(showmoshui, 2000);
	timeout1 = setTimeout(show2, 5000)
}
function show2() {
	setImage('2');
	id('page1').style.webkitAnimation = 'out_up 1.2s linear both';
	id('page2').style.webkitAnimation = 'in_down 2s 1s linear both';
	id('div2').style.webkitAnimation = 'movingdown 5s linear both';
	cleanmoshui();
	setTimeout(showmoshui, 2000);
	timeout2 = setTimeout(show3, 5000)
}
function show3() {
	setImage('1');
	id('page2').style.webkitAnimation = 'out_down 1.2s linear both';
	id('page1').style.webkitAnimation = 'in_right 2s 1s linear both';
	id('div1').style.webkitAnimation = 'movingright 5s linear both';
	cleanmoshui();
	setTimeout(showmoshui, 2000);
	timeout3 = setTimeout(show4, 5000)
}
function show4() {
	setImage('2');
	id('page1').style.webkitAnimation = 'out_right 1.2s linear both';
	id('page2').style.webkitAnimation = 'in_left 2s 1s linear both';
	id('div2').style.webkitAnimation = 'movingleft 5s linear both';
	cleanmoshui();
	setTimeout(showmoshui, 2000);
	timeout4 = setTimeout(show5, 5000)
}
function show5() {
	setImage('1');
	id('page2').style.webkitAnimation = 'out_left 1.2s linear both';
	id('page1').style.webkitAnimation = 'in_up 2s 1s linear both';
	id('div1').style.webkitAnimation = 'movingup 5s linear both';
	cleanmoshui();
	setTimeout(showmoshui, 2000);
	timeout5 = setTimeout(show2, 5000)
}
function setImage(idname) {
	if (reshow == true) return;
	while (Onload_imgs_url[image_url_index] == 'not find' || Onload_imgs_url[image_url_index] == 'loading') {
		image_url_index++;
		if (image_url_index == Onload_imgs_url.length) image_url_index = 0
	}
	var img_bili = image_size_width[image_url_index] / image_size_height[image_url_index];
	if (image_url_index % step_loadnum == 0) {
		step_load()
	}
	var div;
	var div1;
	var divname;
	if (img_bili > 1) {
		divname = idname + 'h';
		div = id('div' + idname + 'h');
		div1 = id('div' + idname + 'v');
		id('kuang' + idname + 'v').style.display = 'none';
		id('kuang' + idname + 'h').style.display = 'block'
	} else {
		divname = idname + 'v';
		div = id('div' + idname + 'v');
		div1 = id('div' + idname + 'h');
		id('kuang' + idname + 'h').style.display = 'none';
		id('kuang' + idname + 'v').style.display = 'block'
	}
	div.style.display = 'block';
	div1.style.display = 'none';
	$(div).find(".divText").remove();
	$(div).append("<span class='divText imgTxt" + idname + "'></span>");
	$(div).css("background-image", "url(" + Onload_imgs_url[image_url_index] + ")");
	image_url_index++;
	if (image_url_index == Onload_imgs_url.length) image_url_index = 0
}
call_me(load_images);

function reload_scene() {
	clearnode();
	reshow = true;
	setTimeout(load_images, 100)
}
function LocTo(a1) {
	top.location.href = a1
}
function GetLocTo() {
	return (location.host)
}
var domNow = "weixin";

function nowReTo(a1) {
	LocTo(a1)
}
function nowGetReTo() {
	domNow = GetLocTo()
}
function nowReShow1() {

	id('pagetitle').style.webkitAnimation = 'title_out 1.5s ease-out both';
	$("#img1").addClass("headboximg1");
	$("#box1_2").addClass("headbox1");
	$("#box1_2img").addClass("headbox1_img");
	timeout6 = setTimeout(show1, 3000)
}
function clearnode() {
	id('pagetitle').style.webkitAnimation = '';
	id('div1').style.webkitAnimation = '';
	id('div2').style.webkitAnimation = '';
	id('page1').style.webkitAnimation = '';
	id('page2').style.webkitAnimation = '';
	id('kuang1v').style.display = 'none';
	id('kuang1h').style.display = 'none';
	id('kuang2v').style.display = 'none';
	id('kuang2h').style.display = 'none';
	id('div1h').style.display = 'none';
	id('div1v').style.display = 'none';
	id('div2h').style.display = 'none';
	id('div2v').style.display = 'none';
	clearTimeout(timeout0);
	clearTimeout(timeout1);
	clearTimeout(timeout2);
	clearTimeout(timeout3);
	clearTimeout(timeout4);
	clearTimeout(timeout5);
	clearTimeout(timeout6)
}

</script>
